<!DOCTYPE html>
<html>
  <head>
    <title>setReadOnly() Test</title>
    <link rel="stylesheet" type="text/css" href="../styles/core.css">
    <link rel="stylesheet" type="text/css" href="test.setReadOnly.css">
    <script type="text/javascript" src="../scripts/jquery-1.4.js"></script>
    <script type="text/javascript" src="../scripts/jqia2.support.js"></script>
    <script type="text/javascript" src="jquery.jqia.setReadOnly.js"></script>
    <script type="text/javascript">
      $(function(){
        $('#sameAddressControl').click(function(){
          var same = this.checked;
          $('#billAddress').val(same ? $('#shipAddress').val():'');
          $('#billCity').val(same ? $('#shipCity').val():'');
          $('#billState').val(same ? $('#shipState').val():'');
          $('#billZip').val(same ? $('#shipZip').val():'');
          $('#billingAddress input').setReadOnly(same);
        });
      });
    </script>
  </head>

  <body>

    <div data-module="Test setReadOnly()">

      <form name="testForm">
        <div>
          <label>First name:</label>
          <input type="text" name="firstName" id="firstName"/>
        </div>
        <div>
          <label>Last name:</label>
          <input type="text" name="lastName" id="lastName"/>
        </div>
        <div id="shippingAddress">
          <h2>Shipping address</h2>
          <div>
            <label>Street address:</label>
            <input type="text" name="shipAddress" id="shipAddress"/>
          </div>
          <div>
            <label>City, state, zip:</label>
            <input type="text" name="shipCity" id="shipCity"/>
            <input type="text" name="shipState" id="shipState"/>
            <input type="text" name="shipZip" id="shipZip"/>
          </div>
        </div>
        <div id="billingAddress">
          <h2>Billing address</h2>
          <div>
            <input type="checkbox" id="sameAddressControl"/>
            Billing address is same as shipping address
          </div>
          <div>
            <label>Street address:</label>
            <input type="text" name="billAddress"
                   id="billAddress"/>
          </div>
          <div>
            <label>City, state, zip:</label>
            <input type="text" name="billCity" id="billCity"/>
            <input type="text" name="billState" id="billState"/>
            <input type="text" name="billZip" id="billZip"/>
          </div>
        </div>
      </form>
    </div>

  </body>
</html>
